<template>
  <div class="course">
    <el-button type="primary" class="addbtn" @click="dialogVisible = true" v-if="!showflag"> </el-button>
    <router-link to="/coursemanager/coursemanagement/courses" class="nava">课程</router-link>
    <router-link to="/coursemanager/coursemanagement/courseclass" class="nava">班级</router-link>
    <el-button type="primary" class="addbtn" @click="dialogVisible = true"><i class="el-icon-circle-plus-outline"
        v-show="!showflag"></i>添加</el-button>
    <el-button type="danger" class="addbtn" v-show="showflag" @click="centerDialogVisible = true">删除</el-button>
    <el-button type="primary" class="choosebtn" @click="changeshow" v-show="!showflag">选择</el-button>
    <el-button type="primary" class="choosebtn" @click="changeshow" v-show="showflag">返回</el-button>
    <el-row :gutter="20" class="coursebox">
      <el-col class="courseone" :span="6" v-for="(x, index) in Courseslist" :key="index">
        <div class="grid-content bg-purple" @click="courdetail(x.subjectId, x.subjectName)">{{ x.subjectName }}</div>
        <el-checkbox v-if="showflag" class="checkicon" @change="getId(x.subId)"></el-checkbox>
      </el-col>
    </el-row>
    <!-- 添加 -->
    <el-dialog class="showbox" title="请添加新的课程" :visible.sync="dialogVisible" width="30%">
      <div>
        名称：
        <el-input placeholder="请输入新的课程名称" v-model="input" @keyup.enter.native="addcourse"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addcourse" class="addcoursebtn">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog class="delshowbox" title="" :visible.sync="centerDialogVisible" width="30%" center>
      <b>确认删除该课程？</b>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delcourse" class="delcoursebtn">确 定</el-button>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      input: "",
      Courseslist: [],
      showflag: false,
      centerDialogVisible: false,
      baseUrl: require("../js/baseUrl.js").baseUrl,
      subId: [],
      realSubid: [],
    }
  },
  methods: {
    //获取课程id
    getId(coursesId) {
      this.subId.push(Number(coursesId));
      let countMap = new Map();
      let realList = []
      this.subId.forEach(v => {
        if (countMap.has(v)) {
          countMap.set(v, countMap.get(v) + 1);
        } else {
          countMap.set(v, 1);
        }
      })
      countMap.forEach((count, num) => {
        if (count % 2 == 0) {
        } else {
          realList.push(num)
        }
      });
      this.realSubid = realList
    },
    changeshow() {
      this.showflag = !this.showflag;
      this.subId = [];
    },
    courdetail(index, name) {
      this.$router.push("/coursemanager/coursemanagement/courdetail?subId=" + index + "&subName=" + name)
    },
    //获取科目
    getcourse() {
      this.$http.post(this.baseUrl + "subject/list", {}).then(res => {
        //console.log(res);
        this.Courseslist = res.data.data
      })
    },
    //添加科目
    addcourse() {
      if (this.input == "") {
        this.$message({
          message: '科目名称不能为空',
          type: 'error'
        });
      } else {
        this.$http.post(this.baseUrl + "subject/insert", {
          subjectName: this.input
        }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.input = "";
            this.dialogVisible = false;
            this.getcourse();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        })
      }
    },
    //删除课程
    delcourse() {
      //console.log(this.realSubid)
      this.check1 = false
      if (this.realSubid == "") {
        this.$message({
          message: '请选择要删除的科目！',
          type: 'error'
        });
        this.centerDialogVisible = false;
      } else {
        this.$http.post(this.baseUrl + "subject/delete", {
          SubIds: this.realSubid,
        }).then(res => {
          if (res.data.code == 200) {
            this.realSubid = []
            this.centerDialogVisible = false;
            this.showflag = !this.showflag;
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getcourse();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            });
          }
        })
      }
    }
  },
  mounted() {
    this.getcourse();
  }
}
</script>

<style lang="less">
.addbtn {
  position: absolute;
  right: 150px;
  top: 0;

  i {
    margin-top: 0px;
  }
}

.choosebtn {
  position: absolute;
  right: 50px;
  top: 0;
}

.coursebox {
  width: 95%;
  height: 100%;
  margin: 45px auto 0px !important;
  text-align: center;

  .courseone {
    position: relative;

    div {
      height: 250px;
      line-height: 250px;
      border: 1px solid #000;
      margin: 10px 0px;
    }

    .checkicon {
      position: absolute;
      // width: 20px;
      // height: 20px;
      // background: url(../image/checkoff.png);
      // top: 0;
      // right: 0;
      top: -4%;
      right: 1%;
    }

  }
}
.delshowbox{
  .el-dialog--center .el-dialog__body {
    text-align: center;
    font-size: 18px;
  }
  .delcoursebtn{
    background: #106ab1;
  }
}

.showbox {
  text-align: center;

  .el-color-picker__icon,
  .el-input,
  .el-textarea {
    width: 70%;
  }
.addcoursebtn{
  background: #106ab1;
}
  .el-dialog__footer {
    text-align: center;
  }
}
</style>